<template>
  <view>
    <nav-bar
      title="切换门店"
      bgColor="#ffb72f"
      titleColor="#fff"
      support-white-black
    />
    <view class="content">
      <view class="blank-box"></view>
      <view
        v-for="(item, index) in shopsByInfo"
        :key="index"
        @click="btn(item)"
        class="li"
        :style="{
          border: shopId === item.id ? ` 1rpx solid ${themeColor};` : 'none',
        }"
      >
        <view class="lef">
          <view class="img">
            <!--						<text v-if="index === 0" class="">当前</text>-->
            <xh-img :src="item.logo" class="logo"></xh-img>
          </view>
        </view>
        <view class="rig">
          <view class="name title-hidden-one">{{ item.shopName }}</view>
          <view class="addres">{{ item.address }}</view>
          <!--          <view v-if="index !== 0" @click="btn(item)" class="btn">切换</view>-->
        </view>
      </view>
    </view>
    <confirm-modal
      v-if="confirmModal.show"
      :title="confirmModal.title"
      :content="confirmModal.content"
      :confirmText="confirmModal.confirmText"
      :cancelText="confirmModal.cancelText"
      :showCancelButton="confirmModal.showCancelButton"
      :confirmTextColor="confirmModal.confirmTextColor"
      :cancelTextColor="confirmModal.cancelTextColor"
      :confirmBgColor="confirmModal.confirmBgColor"
      :cancelBgColor="confirmModal.cancelBgColor"
      @getConfirmModal="getConfirmModal"
    ></confirm-modal>
  </view>
</template>

<script>
import themeColor from "@/const/theme";
import { login } from "@/service/api/sp-common/auth.js";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("sp-common/auth", ["pubUserInfo"]),
    ...mapState("sp-store/index", ["shopsByInfo"]),
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
    shopId({ pubUserInfo }) {
      return pubUserInfo?.pubDomainShopVo?.id;
    },
  },
  data() {
    return {
      confirmModal: {
        show: false,
        title: "提示",
        content: "是否切换当前门店？",
        confirmText: "否",
        cancelText: "是",
        showCancelButton: true,
        confirmTextColor: themeColor.themeColor.info,
        cancelTextColor: "",
        confirmBgColor: themeColor.themeColor.primary,
        cancelBgColor: themeColor.themeColor.info,
      },

      changeLogin: "",
    };
  },
  methods: {
    btn(e) {
      this.confirmModal.show = true;
      this.changeLogin = {
        changeLoginShopId: e.shopId,
        mainShopStatus: e.shopType === 3,
      };
    },
    getConfirmModal(val) {
      this.confirmModal.show = false;
      let { id } = this.pubUserInfo;
      let { changeLoginShopId, mainShopStatus } = this.changeLogin;
      if (val === "cancel") {
        let params = {
          scope: "pubBusinessChangeShopLogin",
          userId: id,
          mainShopStatus,
          changeLoginShopId,
        };
        login(params).then((res) => {
          this.$store
            .dispatch("sp-common/auth/setTokenAction", res)
            .then(() => {
              setTimeout(() => {
                this.$Router.replaceAll({
                  path: "/pages/home/index",
                });
              }, 1900);
            });
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #f7f7f7;
  min-height: 100vh;
  .blank-box {
    width: 686rpx;
    height: 20rpx;
  }
  .li {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: white;
    width: 686rpx;
    margin: 0 auto 20rpx auto;
    border-radius: 12rpx;
    .lef {
      color: #ffb72f;
      .img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 18rpx;
        overflow: hidden;
        position: relative;
        image {
          width: 100%;
          height: 100%;
        }
        text {
          font-size: 26rpx;
          padding: 8rpx 26rpx;
          background-color: white;
          box-sizing: border-box;
          border-radius: 8rpx;
          border: 1rpx solid #ffb72f;
          position: absolute;
          right: 0;
          top: 0;
          z-index: 1;
        }
      }
    }
    .rig {
      flex: 2;
      margin-left: 20rpx;
      .name {
        font-weight: bold;
        font-size: 30rpx;
      }
      .addres {
        font-size: 26rpx;
        margin-top: 20rpx;
        color: #888888;
      }
      .btn {
        font-size: 36rpx;
        font-weight: bold;
        text-align: right;
        color: #ffb72f;
        margin-top: 40rpx;
      }
    }
  }
}
</style>
